<template>
  <div class="pet-adopt-form">
    <h2>发布宠物领养</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="pet-name">宠物名字：</label>
        <input type="text" id="pet-name" v-model="pet.petname" placeholder="请输入宠物名字" required/>
      </div>
      <div class="form-group">
        <label for="pet-type">宠物类型：</label>
        <select id="pet-type" v-model="pet.pettype" @change="updateBreedOptions" required>
          <option value="猫">猫</option>
          <option value="狗">狗</option>
          <option value="其它">其它</option>
        </select>
      </div>
      <div v-if="pet.pettype === '猫'" class="form-group">
        <label for="pet-breed">猫的品种：</label>
        <select id="pet-breed" v-model="pet.breed" required>
          <option value="蓝白">蓝白</option>
          <!-- 其他猫的品种 -->
        </select>
      </div>
      <div v-if="pet.pettype === '狗'" class="form-group">
        <label for="pet-breed">狗的品种：</label>
        <select id="pet-breed" v-model="pet.breed" required>
          <option value="比熊">比熊</option>
          <!-- 其他狗的品种 -->
        </select>
      </div>
      <div v-if="pet.pettype === '其它'" class="form-group">
        <label for="pet-breed">其它动物：</label>
        <select id="pet-breed" v-model="pet.breed" required>
          <option value="兔">兔</option>
          <!-- 其他动物 -->
        </select>
      </div>
      <div class="form-group">
        <label for="pet-age">宠物年龄：</label>
        <input type="number" id="pet-age" v-model="pet.age" min="0" placeholder="请输入宠物年龄" required/>
      </div>
      <div class="form-group">
        <label for="pet-description">宠物描述：</label>
        <input type="text" id="pet-description" v-model="pet.petdescription" placeholder="请输入宠物的描述" required>
      </div>
      <div class="form-group">
        <label for="vaccinated">是否打过疫苗：</label>
        <select id="vaccinated" v-model="pet.vaccinated" required>
          <option value="yes">是</option>
          <option value="no">否</option>
        </select>
      </div>
      <div v-if="pet.vaccinated === 'yes'" class="form-group">
        <label for="vaccination-details">疫苗名称：</label>
        <input type="text" id="vaccination-details" v-model="pet.vaccine" placeholder="请输入疫苗名称"/>
      </div>
      <div class="form-group">
        <label for="pet-location">宠物所在地区：</label>
        <input type="text" id="pet-location" v-model="pet.location" placeholder="请输入宠物所在地区" required/>
      </div>
      <div class="form-group">
        <label for="contact-info">联系方式：</label>
        <input type="text" id="contact-info" v-model="contactInfo" placeholder="请输入您的联系方式" required/>
      </div>
      <div class="form-group">
        <label for="publisher-name">发布人姓名：</label>
        <input type="text" id="publisher-name" v-model="publisherName" placeholder="请输入发布人姓名" required/>
      </div>
      <button type="submit" class="submit-btn">提交</button>
    </form>
    <div v-if="formSubmitted" class="success-message">
      <p>感谢您的提交！您的宠物领养信息已发布。</p>
    </div>
  </div>
</template>

<script>
import { addPet } from '../../api/user.js';

export default {
  data() {
    return {
      publisherName: '', // 对应后端 ownername
      pet: {
        petname: '', // 对应后端 petname
        pettype: '猫', // 对应后端 pettype
        breed: '蓝白', // 对应后端 breed
        age: '', // 对应后端 age
        petdescription: '', // 对应后端 petdescription
        vaccinated: 'yes', // 对应后端 vaccinated
        vaccine: '', // 对应后端 vaccine
        location: '', // 对应后端 location
      },
      contactInfo: '', // 对应后端 contact
      formSubmitted: false,
    };
  },
  methods: {
    async submitForm() {
      // 检查表单数据是否完整
      if (
          !this.pet.petname ||
          !this.pet.pettype ||
          !this.pet.age ||
          !this.pet.petdescription ||
          !this.pet.location ||
          !this.contactInfo ||
          !this.publisherName
      ) {
        alert('请填写所有必填项！');
        return;
      }

      // 构造提交数据
      const formData = {
        petname: this.pet.petname,
        pettype: this.pet.pettype,
        breed: this.pet.breed,
        age: this.pet.age,
        petdescription: this.pet.petdescription,
        vaccinated: this.pet.vaccinated === 'yes' ? 1 : 0, // 转换为后端需要的格式（1/0）
        vaccine: this.pet.vaccine,
        location: this.pet.location,
        ownername: this.publisherName,
        contact: this.contactInfo,
        adopted: 0, // 默认未领养
        adoptername: '', // 默认无领养人
      };

      try {
        // 调用 API 提交数据
        console.log('提交数据：', formData);
        const response = await addPet(formData);
        console.log('提交成功：', response.data);

        // 显示成功消息
        this.formSubmitted = true;

        // 重置表单
        this.resetForm();
      } catch (error) {
        console.error('提交失败：', error);
        alert('提交失败，请稍后重试！');
      }
    },
    resetForm() {
      // 重置表单数据
      this.publisherName = '';
      this.pet = {
        petname: '',
        pettype: '猫',
        breed: '蓝白',
        age: '',
        petdescription: '',
        vaccinated: 'yes',
        vaccine: '',
        location: '',
      };
      this.contactInfo = '';
    },
    updateBreedOptions() {
      // 根据宠物类型动态选择品种
      if (this.pet.pettype === '猫') {
        this.pet.breed = '蓝白';
      } else if (this.pet.pettype === '狗') {
        this.pet.breed = '比熊';
      } else if (this.pet.pettype === '其它') {
        this.pet.breed = '兔';
      } else {
        this.pet.breed = '其它';
      }
    },
  },
};
</script>

<style scoped>
.pet-adopt-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 600px;
  margin: 30px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pet-adopt-form h2 {
  text-align: center;
  font-size: 1.8em;
  color: #333;
  margin-bottom: 30px;
  font-weight: bold;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
  width: 400px;
}

label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
}

textarea {
  resize: vertical;
}

select {
  background-color: #fff;
}

  
.submit-btn {
  background: linear-gradient(135deg, #427374, #4f8a8b); 
  color: white;    
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  width: 200px;
  transition: all 0.3s ease; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #4f8a8b, #427374); 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
}

.submit-btn:active {
  background: linear-gradient(135deg, #4f8a8b, #427374); 
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
}

.success-message {
  margin-top: 20px;
  padding: 15px;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  text-align: center;
}

.success-message p {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 600px) {
  .pet-adopt-form {
    padding: 15px;
  }

  .submit-btn {
    font-size: 14px;
  }
}
</style>